<template>
	<!-- 商铺信息 -->
	<div id="tops">
		<div class="Box">
			<div class="filter-container on">
				<div class="filter-contr">
					<div class="on">
						<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
							<el-form-item label="标题" prop="title">
								<el-input type="text" v-model="ruleForm.title" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="商铺logo" prop="logoUrl">

								<el-upload class="avatar-uploader" action="http://192.168.1.54:8081/upload/admin" :show-file-list="false"
								 :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
									<img v-if="ruleForm.logoUrl" :src="ruleForm.logoUrl" class="avatar" />
									<i v-else class="el-icon-plus avatar-uploader-icon"></i>
								</el-upload>

							</el-form-item>
							<el-form-item label="描述" prop="description">
								<el-input v-model="ruleForm.description"></el-input>
							</el-form-item>
							<el-form-item label="地址" prop="address">
								<el-input v-model="ruleForm.address"></el-input>
							</el-form-item>
						</el-form>
					</div>
				</div>
			</div>
			<el-button style="margin-left: 20px;" type="primary" @click="submitForm" v-insert="'promote:merchant:create'">保留更改</el-button>
		</div>
	</div>

</template>

<script>
	import {
		Shoplist,
		Shopupdate
	} from '../../api/shopsmanage.js'
	export default {
		data() {
			var validateName = (rule, value, callback) => {
				if (!value) {
					callback(new Error('商铺标题不能为空'))
				} else {
					callback()
				}
			}
			var validateAddress = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('商铺描述不能为空'))
				}
			}

			var validateDescribe = (rule, value, callback) => {
				if (!value) {
					callback(new Error('商铺地址不能为空'))
				} else {
					callback()
				}
			}
			return {
				ruleForm: {
					title: '',
					address: '',
					description: '',
					logoUrl: '',
					showType: 2
				},
				rules: {
					title: [{
						required: true,
						validator: validateName,
						trigger: 'blur'
					}],
					address: [{
						required: true,
						validator: validateAddress,
						trigger: 'blur'
					}],
					description: [{
						required: true,
						validator: validateDescribe,
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			// 查询列表
			list() {
				Shoplist().then((response) => {
					console.log(response)
					this.ruleForm = response.data.data
				})
			},
			submitForm() {
				const data = {
					title: this.ruleForm.title,
					logoUrl: this.ruleForm.logoUrl,
					description: this.ruleForm.description,
					address: this.ruleForm.address,
					showType: this.ruleForm.showType
				}
				Shopupdate(data).then((response) => {
					console.log(response)
					if (response.data.errmsg == '成功') {
						this.list()
						this.$message.success({
							type: 'success',
							message: '更改成功'
						})
					} else {
						this.$message.error({
							type: 'info',
							message: response.data.errmsg
						})
					}
				})
			},
			handleAvatarSuccess(res, file) {
				this.ruleForm.logoUrl = res.url
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg'
				const isLt2M = file.size / 1024 / 1024 < 2
				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG 格式!')
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!')
				}
				return isJPG && isLt2M
			}
		},
		created() {
			this.list()
		}
	}
</script>

<style lang="less" scoped="scoped">
	// 头部
	#tops {
		width: 100%;
		overflow: hidden;
		// background-color: pink;
	}

	// 头部
	.Box {
		width: 100%;
		overflow: hidden;
		// height: 900px;
	}

	.filter-container {
		height: 375px
	}

	.on {
		padding: 20px;
	}

	.filter-contr {
		box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
		border: 1px solid #ebeef5;
	}

	/* 头像上传 */
	.avatar:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 118px;
		height: 118px;
		display: block;
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
</style>
